<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="list" border stripe size="small" element-loading-text="拼命加载中..." element-loading-spinner="el-icon-loading" element-loading-background="#67C23A33" height="750">
      <el-table-column type="selection" width="40" align="left" />
      <el-table-column prop="name" label="姓名" width="120" align="left" fixed />
      <el-table-column prop="workId" label="工号" width="120" align="left" />
      <el-table-column prop="email" label="电子邮件" width="200" align="left" />
      <el-table-column prop="phone" label="电话号码" width="120" align="left" />
      <el-table-column prop="department[name]" label="所属部门" width="120" align="left" />
      <el-table-column label="工资账套" width="180" align="left">
        <template v-if="scope.row.salary" slot-scope="scope">
          <el-tooltip effect="dark" placement="right">
            <div slot="content">
              <table>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">基本工资</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.basicSalary }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">奖金</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.bonus }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">午餐补助</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.lunchSalary }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">交通补助</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.trafficSalary }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">应发工资</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.allSalary }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">养老金基数</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.pensionBase }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">养老金比率</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.pensionPer }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">医疗保险基数</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.medicalBase }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">医疗保险比率</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.medicalPer }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">公积金基数</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.accumulationFundBase }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">公积金比率</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.accumulationFundPer }}</td>
                </tr>
                <tr class="salary-table-tr">
                  <td><el-tag size="mini">启用时间</el-tag></td>
                  <td class="salary-table-td">{{ scope.row.salary.createDate }}</td>
                </tr>
              </table>
            </div>
            <el-tag type="primary" size="mini">{{ scope.row.salary.name }}</el-tag>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="left">
        <template slot-scope="scope">
          <el-popover placement="left" width="180" trigger="click" @show="handleUpdate(scope.row)" @hide="handleConfirm(scope.row)">
            <div>
              <el-select v-model="currentSalary" placeholder="请选择工资账套..." size="small" @change="handleChange">
                <el-option v-for="item in salaries" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <el-button slot="reference" type="danger" style="padding: 4px" size="mini">修改工资账套</el-button>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { GetAll, GetAllSalary, Update } from '@/api/Sal/SalSobConfig'

export default {
  name: 'SalSobConfig',
  data() {
    return {
      list: [],
      total: 0,
      currentPage: 1,
      pageSizes: [20, 50, 100, 200, 500, 1000],
      pageSize: 20,
      salaries: [],
      currentSalary: null,
      isChange: false
    }
  },
  mounted() {
    this.getAll()
    this.getAllSalary()
  },
  methods: {
    getAll() {
      this.loading = true
      var url = `page=${this.currentPage}&size=${this.pageSize}&`
      GetAll(url).then((res) => {
        if (res) {
          this.list = res.data
          this.total = res.total
          this.loading = false
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getAll()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAll()
    },
    getAllSalary() {
      GetAllSalary().then((res) => {
        if (res) {
          this.salaries = res
        }
      })
    },
    handleUpdate(row) {
      this.isChange = false
      if (row.salary) {
        this.currentSalary = row.salary.id
      } else {
        this.currentSalary = null
      }
    },
    handleChange(val) {
      this.isChange = true
      this.currentSalary = val
    },
    handleConfirm(row) {
      if (this.isChange) {
        var url = 'employeeId=' + row.id + '&salaryId=' + this.currentSalary + '&'
        Update(url).then((res) => {
          if (res) {
            this.getAll()
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scope>
.salary-table-tr {
  line-height: 20px;

  .salary-table-td {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
